<template>
  <a-card size="small" :bordered="false" :hoverable="false">
    <div class="center-container">
      <!--  页面标题-->
      <div class="header-title">我要申请</div>

      <div style="width: 70%; display: flex; justify-content: space-between">
        <!--  内容区域-->
        <div class="center-form-area">
          <a-row>
            <a-col flex="600px">
              <a-form ref="formRef" :model="form" :rules="rules" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                <a-form-item label="公司全称" name="contact_person">
                  <a-input class="form-item" v-model:value.trim="form.contact_person" placeholder="请输入公司全称" disabled />
                </a-form-item>
                <a-form-item label="法人姓名" name="legal_person">
                  <a-input class="form-item" v-model:value.trim="form.legal_person" placeholder="请输入法人姓名" />
                </a-form-item>
                <a-form-item label="法人身份证照" name="idcard_image">
                  <FileUpload v-model:value="form.idcard_image" :default-file-list="form.idcard_image" buttonText="上传正反面照片" :maxUploadSize="2" :maxSize="2" accept=".jpeg,.jpg,.png" />
                </a-form-item>
                <a-form-item label="联系人" name="contact">
                  <a-input class="form-item" v-model:value.trim="form.contact" placeholder="请输入联系人姓名" />
                </a-form-item>
                <a-form-item label="联系方式" name="phone">
                  <a-input class="form-item" v-model:value.trim="form.phone" placeholder="请输入联系方式" />
                </a-form-item>
                <a-form-item label="税务编号" name="tax_no">
                  <a-input class="form-item" v-model:value.trim="form.tax_no" placeholder="请输入税务编号" />
                </a-form-item>
                <a-form-item label="营业执照" name="license_image">
                  <FileUpload v-model:value="form.license_image" :default-file-list="form.license_image" buttonText="上传图片" :maxUploadSize="1" :maxSize="1" accept=".jpeg,.jpg,.png" />
                </a-form-item>
                <a-form-item label="用款周期" name="loan_cycle">
                  <a-select ref="select" v-model:value="form.loan_cycle" placeholder="请选择用款周期">
                    <a-select-option value="1">3个月</a-select-option>
                    <a-select-option value="2">6个月</a-select-option>
                    <a-select-option value="3">1年</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="申请金额" name="apply_amount">
                  <a-input class="form-item" v-model:value.trim="form.apply_amount" placeholder="请输入申请金额" />
                </a-form-item>
                <a-form-item label="资金用途" name="fund_purpose">
                  <a-input class="form-item" v-model:value.trim="form.fund_purpose" placeholder="请输入资金用途" />
                </a-form-item>
              </a-form>
              <a-button style="margin: 0px 20%" @click="reset">重置</a-button>
              <a-button type="primary" @click="onSubmit">确认</a-button>
            </a-col>
          </a-row>
        </div>
        <div style="width: 2px; height: 500px; background: rgba(204, 204, 204, 1); margin: 20px 40px"></div>
        <div>
          <div style="font-size: 20px; margin: 10px 0px">注意事项：</div>
          <div style="font-size: 14px; color: rgba(102, 99, 99, 1); margin-bottom: 10px">1. 请认真阅读经营扶助计划协议后，填写上传相关申请资料</div>
          <div style="font-size: 14px; color: rgba(102, 99, 99, 1); margin-bottom: 10px">2. 您上传提交的资料，我司会尽快进行审核</div>
          <div style="font-size: 14px; color: rgba(102, 99, 99, 1); margin-bottom: 10px">3. 您可以在系统中查看审核进度</div>
          <div style="font-size: 14px; color: rgba(102, 99, 99, 1); margin-bottom: 10px">4. 如有任何疑问，或其他相关咨询，您可以随时来电或通过其他方式进行咨询</div>
        </div>
      </div>
    </div>
  </a-card>
</template>
<script setup lang="ts">
import FileUpload from '@/components/support/file-upload/index.vue'
import { onMounted, ref } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { useUserStore } from '@/store/modules/user-store'
import { applyApi } from '@/api/business/service/support-api'
import { errorSentry } from '@/lib/error-sentry'
import { useLoadingStore } from '@/store/modules/loading-store'
const loadingStore = useLoadingStore()

const companyInfo = useUserStore().getUserInfo
// 组件ref
const formRef = ref()
const form = ref({
  contact_person: '',
  legal_person: '',
  idcard_image: '',
  contact: '',
  phone: '',
  tax_no: '',
  license_image: '',
  loan_cycle: undefined,
  apply_amount: '',
  fund_purpose: ''
})

const rules = {
  contact_person: [{ required: true, message: '请输入公司全称', trigger: 'blur' }],
  legal_person: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
  idcard_image: [
    { required: true, message: '请上传法人身份证照', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!value || value.split(',').length !== 2) {
          callback(new Error('必须上传法人身份证正反面两张图片'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  contact: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  tax_no: [{ required: true, message: '请输入税务编号', trigger: 'blur' }],
  license_image: [{ required: true, message: '请上传营业执照', trigger: 'blur' }],
  loan_cycle: [{ required: true, message: '请输入用款周期', trigger: 'blur' }],
  apply_amount: [{ required: true, message: '请输入申请金额', trigger: 'blur' }],
  fund_purpose: [{ required: true, message: '请输入资金用途', trigger: 'blur' }]
}

const queryData = () => {
  form.value.contact_person = companyInfo.name
  form.value.contact = companyInfo.contact
  form.value.phone = companyInfo.phone
  form.value.tax_no = companyInfo.tax_no
}
onMounted(queryData)

// 重置
const reset = () => {
  form.value = {}
  queryData()
}
// 确定
function onSubmit() {
  formRef.value
    .validate()
    .then(async () => {
      loadingStore.show()
      try {
        const data = {
          legal_person: form.value.legal_person,
          idcard_image: form.value.idcard_image,
          contact: form.value.contact,
          phone: form.value.phone,
          tax_no: form.value.tax_no,
          license_image: form.value.license_image,
          loan_cycle: form.value.loan_cycle,
          apply_amount: form.value.apply_amount,
          fund_purpose: form.value.fund_purpose
        }
        await applyApi.create(data)
        Modal.success({
          title: '提交成功',
          content: '您已成功提交申请，可返回系统经销商端，查看审核和放款进度',
          okText: '确认',
          onOk() {
            console.log('ok')
          }
        })
        form.value = {}
        queryData()
      } catch (error) {
        if (error?.data?.id) {
          Modal.error({
            title: '提交',
            content: '当前已存在用款中申请，请先完成还款，再进行新的申请放款进度',
            okText: '确认',
            onOk() {
              console.log('ok')
            }
          })
        } else {
          message.error(error.msg)
        }
        form.value = {}
        queryData()
        errorSentry.captureError(error)
      } finally {
        loadingStore.hide()
      }
    })
    .catch((error) => {
      console.log('error', error)
      message.error('参数验证错误，请仔细填写表单数据!')
    })
}
</script>
<style lang="less" scoped>
.center-container {
  .header-title {
    font-size: 25px;
    font-weight: 700;
    margin-left: 28%;
  }

  .center-form-area {
    width: 600px;
    margin-top: 20px;

    .avatar-container {
      position: relative;
      border-radius: 50%;
      overflow: hidden;
      width: 100%;
      height: 100%;

      .avatar-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 17px;
      }

      &:hover .overlay {
        opacity: 1; /* 鼠标悬停时显示蒙版 */
      }
    }

    .avatar-uploader {
      :deep(.ant-upload) {
        border-radius: 50%;
        width: 150px;
        height: 150px;
      }
    }

    .ant-upload-select-picture-card i {
      font-size: 32px;
      color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
      margin-top: 8px;
      color: #666;
    }
  }
}
</style>
